ESBuild์ SWC๋ฅผ ์ฌ์ฉํ ํ๋ก ํธ์๋ ๋น๋ ์ต์ ํ ์ข ํฉ ๊ฐ์ด๋. ์ค์ , ๊ตฌ์ฑ, ์ฑ๋ฅ ๋ฒค์น๋งํฌ ๋ฐ ๋ ๋น ๋ฅธ ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ๋ฅผ ์ํ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ค๋ฃน๋๋ค.
ํ๋ก ํธ์๋ ๋น๋ ์ต์ ํ: ESBuild์ SWC ์ปดํ์ผ ์ ๋ต
์ค๋๋ ๋น ๋ฅด๊ฒ ๋ณํํ๋ ์น ๊ฐ๋ฐ ํ๊ฒฝ์์ ํ๋ก ํธ์๋ ๋น๋ ํ๋ก์ธ์ค๋ฅผ ์ต์ ํํ๋ ๊ฒ์ ๊ณ ์ฑ๋ฅ์ ํจ์จ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๊ณตํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋๋ฆฐ ๋น๋ ์๊ฐ์ ๊ฐ๋ฐ์ ์์ฐ์ฑ์ ํฐ ์ํฅ์ ๋ฏธ์น๊ณ ๋ฆด๋ฆฌ์ค ์ฃผ๊ธฐ๋ฅผ ๊ธธ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค. ์ด ๊ฐ์ด๋์์๋ ํ๋ก ํธ์๋ ๋น๋ ์ต์ ํ๋ฅผ ์ํ ๋ ๊ฐ์ง ํ๋์ ์ด๊ณ ์ ์ ์ธ๊ธฐ๋ฅผ ์ป๊ณ ์๋ ๋๊ตฌ์ธ ESBuild์ SWC๋ฅผ ์ดํด๋ด ๋๋ค. ์ฐ๋ฆฌ๋ ์ด๋ค์ ๊ธฐ๋ฅ์ ๊น์ด ํ๊ณ ๋ค์ด Webpack ๋ฐ Babel๊ณผ ๊ฐ์ ๊ธฐ์กด ๋๊ตฌ์ ๋น๊ตํ๊ณ , ํ๋ก์ ํธ์ ํตํฉํ์ฌ ์๋นํ ์ฑ๋ฅ ํฅ์์ ๋ฌ์ฑํ๊ธฐ ์ํ ์ค์ฉ์ ์ธ ์ ๋ต์ ์ ๊ณตํ ๊ฒ์ ๋๋ค.
๋ฌธ์ ์ดํดํ๊ธฐ: ๋๋ฆฐ ๋น๋์ ๋น์ฉ
ํด๊ฒฐ์ฑ ์ ์ดํด๋ณด๊ธฐ ์ ์ ๋ฌธ์ ๋ฅผ ์ดํดํด ๋ด ์๋ค. ๊ธฐ์กด์ ํ๋ก ํธ์๋ ๋น๋ ํ์ดํ๋ผ์ธ์ ์ข ์ข ๋ค์๊ณผ ๊ฐ์ ์ฌ๋ฌ ๋จ๊ณ๋ฅผ ํฌํจํฉ๋๋ค:
- ํธ๋์คํ์ผ๋ง: ์ต์ JavaScript/TypeScript ์ฝ๋๋ฅผ ๋ธ๋ผ์ฐ์ ์ ํธํ๋๋ ES5 ์ฝ๋๋ก ๋ณํ (์ฃผ๋ก Babel์ด ์ฒ๋ฆฌ).
- ๋ฒ๋ค๋ง: ์ฌ๋ฌ JavaScript ๋ชจ๋์ ํ๋์ (๋๋ ๋ช ๊ฐ์) ๋ฒ๋ค(๋ค)๋ก ๊ฒฐํฉ (์ผ๋ฐ์ ์ผ๋ก Webpack, Parcel ๋๋ Rollup์ด ์ํ).
- ์์ถ(Minification): ๋ถํ์ํ ๋ฌธ์(๊ณต๋ฐฑ, ์ฃผ์)๋ฅผ ์ ๊ฑฐํ์ฌ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์.
- ์ฝ๋ ์คํ๋ฆฌํ : ์ ํ๋ฆฌ์ผ์ด์ ์ฝ๋๋ฅผ ํ์์ ๋ฐ๋ผ ๋ก๋ํ ์ ์๋ ๋ ์์ ์ฒญํฌ๋ก ๋ถํ .
- ํธ๋ฆฌ ์์ดํน: ์ฌ์ฉ๋์ง ์๋ ์ฝ๋(dead code)๋ฅผ ์ ๊ฑฐํ์ฌ ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ๋์ฑ ์ค์.
์ด๋ฌํ ๊ฐ ๋จ๊ณ๋ ์ค๋ฒํค๋๋ฅผ ์ถ๊ฐํ๋ฉฐ, ํ๋ JavaScript ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณต์ก์ฑ์ ์ข ์ข ๋ฌธ์ ๋ฅผ ์ ํ์ํต๋๋ค. ๋๊ท๋ชจ ์ฝ๋๋ฒ ์ด์ค, ๋ณต์กํ ์์กด์ฑ, ๊ทธ๋ฆฌ๊ณ ๋ณต์กํ ๊ตฌ์ฑ์ ๋น๋ ์๊ฐ์ ์ ๋ถ์ผ๋ก ๋๋ ค ๊ฐ๋ฐ์ ์์ฐ์ฑ์ ์ ํดํ๊ณ ํผ๋๋ฐฑ ๋ฃจํ๋ฅผ ๋ฆ์ถ ์ ์์ต๋๋ค.
์ ์ธ๊ณ์ ์ผ๋ก ์ฌ์ฉ๋๋ ๋๊ท๋ชจ ์ ์ ์๊ฑฐ๋ ํ๋ซํผ์ ์๊ฐํด ๋ณด์ธ์. ๋๋ฆฐ ๋น๋ ํ๋ก์ธ์ค๋ ์ค์ํ ๊ธฐ๋ฅ ์ถ์๋ฅผ ์ง์ฐ์ํค๊ณ , ์๊ฐ์ ๋ฏผ๊ฐํ ๋ง์ผํ ์บ ํ์ธ์ ์ํฅ์ ๋ฏธ์น๋ฉฐ, ๊ถ๊ทน์ ์ผ๋ก ์์ต์ ์ํฅ์ ์ค ์ ์์ต๋๋ค. ์ฌ๋ฌ ์๊ฐ๋์ ๊ฑธ์ณ ์์นํ ๊ฐ๋ฐํ(์: ์บ๋ฆฌํฌ๋์, ๋ฐ๋, ๋์ฟ์ ๊ฐ๋ฐ์)์ ๊ฒฝ์ฐ, ๋๋ฆฐ ๋น๋๋ ํ์ ์ํฌํ๋ก์ฐ๋ฅผ ๋ฐฉํดํ๊ณ ์ ๋ฐ์ ์ธ ํ๋ก์ ํธ ํจ์จ์ฑ์ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค.
ESBuild ์๊ฐ: Go๋ก ๊ตฌ๋๋๋ ์๋์ ์ ์
ESBuild๋ Go๋ก ์์ฑ๋ ๋งค์ฐ ๋น ๋ฅธ JavaScript ๋ฐ TypeScript ๋ฒ๋ค๋ฌ์ด์ ์์ถ๊ธฐ์ ๋๋ค. ์ฃผ์ ์ฅ์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์๋์ ์ธ ์๋: ESBuild๋ Webpack๊ณผ ๊ฐ์ ๊ธฐ์กด ๋ฒ๋ค๋ฌ๋ณด๋ค ํจ์ฌ ๋น ๋ฅด๋ฉฐ, ์ข ์ข 10-100๋ฐฐ ๋ ๋น ๋ฆ ๋๋ค. ์ด ์๋๋ ์ฃผ๋ก Go๋ก ๊ตฌํ๋์๊ธฐ ๋๋ฌธ์ด๋ฉฐ, ํจ์จ์ ์ธ ๋ณ๋ ฌ ์ฒ๋ฆฌ์ ์ต์ํ์ ์ค๋ฒํค๋๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- ๊ฐ๋จํ ๊ตฌ์ฑ: ESBuild๋ ๋ ๋ณต์กํ ๋๊ตฌ์ ๋นํด ์๋์ ์ผ๋ก ๊ฐ๋จํ ๊ตฌ์ฑ์ ์ ๊ณตํฉ๋๋ค.
- ๋ด์ฅ ์ง์: JavaScript, TypeScript, JSX, CSS ๋ฐ ๊ธฐํ ์ผ๋ฐ์ ์ธ ์น ๊ฐ๋ฐ ๊ธฐ์ ์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ง์ํฉ๋๋ค.
ESBuild ์ค์ ์ฌ์ฉ: ๊ฐ๋จํ ์์
๊ฐ๋จํ TypeScript ํ๋ก์ ํธ๋ฅผ ๋ฒ๋ค๋งํ๊ธฐ ์ํด ESBuild๋ฅผ ์ฌ์ฉํ๋ ๊ธฐ๋ณธ ์์ ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
๋จผ์ ESBuild๋ฅผ ์ค์นํฉ๋๋ค:
npm install -D esbuild
๊ทธ๋ฐ ๋ค์, ๊ฐ๋จํ `index.ts` ํ์ผ์ ๋ง๋ญ๋๋ค:
// index.ts
import { greet } from './greeter';
console.log(greet('World'));
๊ทธ๋ฆฌ๊ณ `greeter.ts` ํ์ผ์ ๋ง๋ญ๋๋ค:
// greeter.ts
export function greet(name: string): string {
return `Hello, ${name}!`;
}
๋ง์ง๋ง์ผ๋ก, ๋ช ๋ น์ค์์ ESBuild๋ฅผ ์คํํฉ๋๋ค:
npx esbuild index.ts --bundle --outfile=bundle.js --format=iife
์ด ๋ช ๋ น์ด๋ ESBuild์๊ฒ `index.ts`์ ๋ชจ๋ ์์กด์ฑ์ ์ฆ์ ์คํ ํจ์ ํํ์(IIFE) ํ์์ ์ฌ์ฉํ์ฌ `bundle.js`๋ผ๋ ๋จ์ผ ํ์ผ๋ก ๋ฒ๋ค๋งํ๋ผ๊ณ ์ง์ํฉ๋๋ค.
๊ตฌ์ฑ ์ต์
ESBuild๋ ๋ค์๊ณผ ๊ฐ์ ๋ค์ํ ๊ตฌ์ฑ ์ต์ ์ ์ ๊ณตํฉ๋๋ค:
--bundle: ๋ชจ๋ ์์กด์ฑ์ ๋จ์ผ ํ์ผ๋ก ๋ฒ๋ค๋งํฉ๋๋ค.--outfile: ์ถ๋ ฅ ํ์ผ ์ด๋ฆ์ ์ง์ ํฉ๋๋ค.--format: ์ถ๋ ฅ ํ์(iife, cjs, esm)์ ์ง์ ํฉ๋๋ค.--minify: ์ถ๋ ฅ ์ฝ๋๋ฅผ ์์ถํฉ๋๋ค.--sourcemap: ๋๋ฒ๊น ์ ์ํ ์์ค ๋งต์ ์์ฑํฉ๋๋ค.--platform: ์ถ๋ ฅ ์ฝ๋์ ๋์ ํ๋ซํผ(browser ๋๋ node)์ ์ง์ ํฉ๋๋ค.
๋ ๋ณต์กํ ์ค์ ์ ์ํด ๊ตฌ์ฑ ํ์ผ(`esbuild.config.js`)์ ๋ง๋ค ์๋ ์์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๋น๋ ๊ตฌ์ฑ์ ๋ ๋์ ๊ตฌ์ฑ๊ณผ ์ฌ์ฌ์ฉ์ฑ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
๊ธฐ์กด ํ๋ก์ ํธ์ ESBuild ํตํฉํ๊ธฐ
ESBuild๋ ๋ค์๊ณผ ๊ฐ์ ๋ค์ํ ๋น๋ ๋๊ตฌ ๋ฐ ํ์คํฌ ๋ฌ๋๋ฅผ ์ฌ์ฉํ์ฌ ๊ธฐ์กด ํ๋ก์ ํธ์ ํตํฉํ ์ ์์ต๋๋ค:
- npm ์คํฌ๋ฆฝํธ: `package.json` ํ์ผ์ ์ง์ ESBuild ๋ช ๋ น์ ์ ์ํฉ๋๋ค.
- Gulp: `gulp-esbuild` ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ์ฌ Gulp ์ํฌํ๋ก์ฐ์ ESBuild๋ฅผ ํตํฉํฉ๋๋ค.
- Rollup: Rollup ๊ตฌ์ฑ ๋ด์์ ESBuild๋ฅผ ํ๋ฌ๊ทธ์ธ์ผ๋ก ์ฌ์ฉํฉ๋๋ค.
SWC ์๊ฐ: Rust ๊ธฐ๋ฐ์ ๋์
SWC(Speedy Web Compiler)๋ ์ฐจ์ธ๋ ๊ณ ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ํ Rust ๊ธฐ๋ฐ ํ๋ซํผ์ ๋๋ค. ํธ๋์คํ์ผ๋ง, ๋ฒ๋ค๋ง, ์์ถ ๋ฑ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. SWC๋ Babel๊ณผ Terser๋ฅผ ์๋ฒฝํ๊ฒ ๋์ฒดํ๋ ๊ฒ์ ๋ชฉํ๋ก ํ๋ฉฐ, ์๋นํ ์ฑ๋ฅ ํฅ์์ ์ ๊ณตํฉ๋๋ค.
SWC์ ์ฃผ์ ๊ธฐ๋ฅ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ๊ณ ์ฑ๋ฅ: SWC๋ Rust์ ์ฑ๋ฅ ํน์ฑ์ ํ์ฉํ์ฌ ํ์ํ ์๋๋ฅผ ๋ฌ์ฑํฉ๋๋ค.
- ํ์ฅ ๊ฐ๋ฅํ ํ๋ฌ๊ทธ์ธ ์์คํ : SWC๋ ๊ธฐ๋ฅ์ ํ์ฅํ๊ณ ๋น๋ ํ๋ก์ธ์ค๋ฅผ ์ฌ์ฉ์ ์ ์ํ ์ ์๋ ํ๋ฌ๊ทธ์ธ ์์คํ ์ ์ง์ํฉ๋๋ค.
- TypeScript ๋ฐ JSX ์ง์: SWC๋ TypeScript ๋ฐ JSX ๊ตฌ๋ฌธ์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ง์ํฉ๋๋ค.
- ์๋ฒฝํ ๋์ฒด: ๋ง์ ๊ฒฝ์ฐ SWC๋ ์ต์ํ์ ๊ตฌ์ฑ ๋ณ๊ฒฝ๋ง์ผ๋ก Babel์ ์๋ฒฝํ๊ฒ ๋์ฒดํ ์ ์์ต๋๋ค.
SWC ์ค์ ์ฌ์ฉ: Babel ๋์ฒด ์์
๊ฐ๋จํ ํ๋ก์ ํธ์์ SWC๋ฅผ Babel ๋์ฒดํ์ผ๋ก ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์์ฐํด ๋ณด๊ฒ ์ต๋๋ค.
๋จผ์ SWC์ ํด๋น CLI๋ฅผ ์ค์นํฉ๋๋ค:
npm install -D @swc/core @swc/cli
`.swcrc` ๊ตฌ์ฑ ํ์ผ(`.babelrc`์ ์ ์ฌ)์ ๋ง๋ญ๋๋ค:
{
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": true,
"decorators": true
},
"transform": {
"legacyDecorator": true,
"decoratorMetadata": true
},
"target": "es5",
"loose": false,
"minify": {
"compress": false,
"mangle": false
}
},
"module": {
"type": "commonjs"
}
}
์ด ๊ตฌ์ฑ์ SWC์๊ฒ TypeScript์ JSX๋ฅผ ํ์ฑํ๊ณ , ๋ฐ์ฝ๋ ์ดํฐ๋ฅผ ๋ณํํ๊ณ , ES5๋ฅผ ๋์์ผ๋ก ํ๋ฉฐ, CommonJS ๋ชจ๋์ ์ฌ์ฉํ๋๋ก ์ง์ํฉ๋๋ค.
์ด์ SWC๋ฅผ ์ฌ์ฉํ์ฌ TypeScript ํ์ผ์ ํธ๋์คํ์ผํ ์ ์์ต๋๋ค:
npx swc src --out-dir lib
์ด ๋ช ๋ น์ด๋ `src` ๋๋ ํ ๋ฆฌ์ ๋ชจ๋ ํ์ผ์ `lib` ๋๋ ํ ๋ฆฌ๋ก ํธ๋์คํ์ผํฉ๋๋ค.
SWC ๊ตฌ์ฑ ์ต์
SWC์ ๊ตฌ์ฑ์ ๋งค์ฐ ์ ์ฐํ๋ฉฐ ๋น๋ ํ๋ก์ธ์ค์ ๋ค์ํ ์ธก๋ฉด์ ์ฌ์ฉ์ ์ ์ํ ์ ์์ต๋๋ค. ๋ช ๊ฐ์ง ์ฃผ์ ์ต์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
jsc.parser: JavaScript ๋ฐ TypeScript์ฉ ํ์๋ฅผ ๊ตฌ์ฑํฉ๋๋ค.jsc.transform: ๋ฐ์ฝ๋ ์ดํฐ ์ง์ ๋ฐ JSX ๋ณํ๊ณผ ๊ฐ์ ๋ณํ์ ๊ตฌ์ฑํฉ๋๋ค.jsc.target: ๋์ ECMAScript ๋ฒ์ ์ ์ง์ ํฉ๋๋ค.module.type: ๋ชจ๋ ์ ํ(commonjs, es6, umd)์ ์ง์ ํฉ๋๋ค.
๊ธฐ์กด ํ๋ก์ ํธ์ SWC ํตํฉํ๊ธฐ
SWC๋ ๋ค์์ ํฌํจํ ๋ค์ํ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๊ธฐ์กด ํ๋ก์ ํธ์ ํตํฉํ ์ ์์ต๋๋ค:
- Webpack: `swc-loader`๋ฅผ ์ฌ์ฉํ์ฌ Webpack ๋น๋ ํ๋ก์ธ์ค์ SWC๋ฅผ ํตํฉํฉ๋๋ค.
- Rollup: `@rollup/plugin-swc` ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ์ฌ Rollup์ ํตํฉํฉ๋๋ค.
- Next.js: Next.js๋ SWC๋ฅผ ๋ด์ฅ ์ง์ํ๋ฏ๋ก Next.js ํ๋ก์ ํธ์์ ํธ๋์คํ์ผ๋ง์ SWC๋ฅผ ์ฝ๊ฒ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- Gulp: ๋น๋ ํ๋ก์ธ์ค์ SWC CLI๋ฅผ ํ์ฉํ๋ ์ฌ์ฉ์ ์ ์ Gulp ํ์คํฌ๋ฅผ ์์ฑํฉ๋๋ค.
ESBuild ๋ SWC: ๋น๊ต ๋ถ์
ESBuild์ SWC ๋ชจ๋ ๊ธฐ์กด ๋น๋ ๋๊ตฌ์ ๋นํด ์๋นํ ์ฑ๋ฅ ํฅ์์ ์ ๊ณตํฉ๋๋ค. ๊ทธ๋ฌ๋ ๊ณ ๋ คํด์ผ ํ ๋ช ๊ฐ์ง ์ฃผ์ ์ฐจ์ด์ ์ด ์์ต๋๋ค:
| ๊ธฐ๋ฅ | ESBuild | SWC |
|---|---|---|
| ์ธ์ด | Go | Rust |
| ๋ฒ๋ค๋ง | ์ (๋ฒ๋ค๋ฌ ๋ฐ ์์ถ๊ธฐ) | ์ ํ์ (์ฃผ๋ก ์ปดํ์ผ๋ฌ) - ๋ฒ๋ค๋ง์ ์ข ์ข ์ธ๋ถ ๋๊ตฌ๊ฐ ํ์ํฉ๋๋ค. |
| ํธ๋์คํ์ผ๋ง | ์ | ์ |
| ์์ถ | ์ | ์ |
| ํ๋ฌ๊ทธ์ธ ์ํ๊ณ | ๋ ์์ง๋ง ์ฑ์ฅ ์ค | ๋ ์ฑ์ํจ, ํนํ Babel ๋์ฒด์ฉ์ผ๋ก |
| ๊ตฌ์ฑ | ๋ ๊ฐ๋จํ๊ณ ์ง๊ด์ | ๋ ์ ์ฐํ์ง๋ง ๋ ๋ณต์กํ ์ ์์ |
| ์ฌ์ฉ ์ฌ๋ก | ์ต์ํ์ ๊ตฌ์ฑ์ผ๋ก ๋น ๋ฅธ ๋ฒ๋ค๋ง๊ณผ ์์ถ์ด ํ์ํ ํ๋ก์ ํธ์ ์ด์์ ์ ๋๋ค. ๊ฐ๋จํ ํ๋ก์ ํธ์์ Webpack ๋์ฒด์ฉ์ผ๋ก ์ข์ต๋๋ค. | ๋ณต์กํ ํธ๋์คํ์ผ๋ง ์๊ตฌ ์ฌํญ์ด ์๊ฑฐ๋ Babel์์ ๋ง์ด๊ทธ๋ ์ด์ ํ ๋ ํ์ํฉ๋๋ค. ๊ธฐ์กด Webpack ์ํฌํ๋ก์ฐ์ ์ ํตํฉ๋ฉ๋๋ค. |
| ํ์ต ๊ณก์ | ์๋์ ์ผ๋ก ๋ฐฐ์ฐ๊ณ ๊ตฌ์ฑํ๊ธฐ ์ฌ์. | ํนํ ์ฌ์ฉ์ ์ ์ ๊ตฌ์ฑ ๋ฐ ํ๋ฌ๊ทธ์ธ์ ๋ค๋ฃฐ ๋ ํ์ต ๊ณก์ ์ด ์ฝ๊ฐ ๋ ๊ฐํ๋ฆ. |
์ฑ๋ฅ: ๋ ๋ค Babel๊ณผ Webpack๋ณด๋ค ํจ์ฌ ๋น ๋ฆ ๋๋ค. ESBuild๋ ์ผ๋ฐ์ ์ผ๋ก ๋ ๋น ๋ฅธ ๋ฒ๋ค๋ง ์๋๋ฅผ ๋ณด์ด๋ฉฐ, SWC๋ ํนํ ๋ณต์กํ ๋ณํ์์ ๋ ๋์ ํธ๋์คํ์ผ๋ง ์๋๋ฅผ ์ ๊ณตํ ์ ์์ต๋๋ค.
์ปค๋ฎค๋ํฐ ๋ฐ ์ํ๊ณ: SWC๋ Babel ๋์ฒด์ ์ค์ ์ ๋ ๋๋ถ์ ๋ ํฌ๊ณ ์ฑ์ํ ์ํ๊ณ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค. ESBuild์ ์ํ๊ณ๋ ๋น ๋ฅด๊ฒ ์ฑ์ฅํ๊ณ ์์ง๋ง ์์ง์ ๋ ์์ต๋๋ค.
์ฌ๋ฐ๋ฅธ ๋๊ตฌ ์ ํํ๊ธฐ:
- ESBuild: ์ต์ํ์ ๊ตฌ์ฑ์ผ๋ก ๋น ๋ฅธ ๋ฒ๋ค๋ฌ์ ์์ถ๊ธฐ๊ฐ ํ์ํ๊ณ , ์ ํ๋ก์ ํธ๋ฅผ ์์ํ๊ฑฐ๋ ๋น๋ ํ๋ก์ธ์ค๋ฅผ ๋ฆฌํฉํ ๋งํ ์ํฅ์ด ์๋ค๋ฉด ESBuild๋ ํ๋ฅญํ ์ ํ์ ๋๋ค.
- SWC: Babel์ ์๋ฒฝํ๊ฒ ๋์ฒดํด์ผ ํ๊ฑฐ๋, ๋ณต์กํ ํธ๋์คํ์ผ๋ง ์๊ตฌ ์ฌํญ์ด ์๊ฑฐ๋, ๊ธฐ์กด Webpack ์ํฌํ๋ก์ฐ์ ํตํฉํ๋ ค๋ ๊ฒฝ์ฐ SWC๊ฐ ๋ ๋์ ์ต์ ์ ๋๋ค.
ํ๋ก ํธ์๋ ๋น๋ ์ต์ ํ๋ฅผ ์ํ ์ค์ฉ์ ์ธ ์ ๋ต
ESBuild, SWC ๋๋ ์ด ๋์ ์กฐํฉ ์ค ๋ฌด์์ ์ ํํ๋ , ํ๋ก ํธ์๋ ๋น๋ ํ๋ก์ธ์ค๋ฅผ ์ต์ ํํ๊ธฐ ์ํ ๋ช ๊ฐ์ง ์ค์ฉ์ ์ธ ์ ๋ต์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ๋น๋ ๋ถ์: Webpack Bundle Analyzer๋ ESBuild์ `--analyze` ํ๋๊ทธ์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ณ๋ชฉ ํ์๊ณผ ๊ฐ์ ์์ญ์ ์๋ณํฉ๋๋ค.
- ์ฝ๋ ์คํ๋ฆฌํ : ์ ํ๋ฆฌ์ผ์ด์ ์ฝ๋๋ฅผ ํ์์ ๋ฐ๋ผ ๋ก๋ํ ์ ์๋ ๋ ์์ ์ฒญํฌ๋ก ๋ถํ ํฉ๋๋ค. ์ด๋ ์ด๊ธฐ ๋ก๋ ์๊ฐ์ ์ค์ด๊ณ ์ฒด๊ฐ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค.
- ํธ๋ฆฌ ์์ดํน: ์ฌ์ฉ๋์ง ์๋ ์ฝ๋๋ฅผ ์ ๊ฑฐํ์ฌ ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ค์ ๋๋ค. ๋ชจ๋์ด ํธ๋ฆฌ ์์ดํน์ ์ ํฉํ๋๋ก ์ค๊ณ๋์๋์ง ํ์ธํฉ๋๋ค(์: ES ๋ชจ๋ ์ฌ์ฉ).
- ์์ถ: ์์ถ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ์ฝ๋์์ ๋ถํ์ํ ๋ฌธ์๋ฅผ ์ ๊ฑฐํฉ๋๋ค.
- ์ด๋ฏธ์ง ์ต์ ํ: ํ์ง ์ ํ ์์ด ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ธฐ ์ํด ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํฉ๋๋ค. ImageOptim ๋๋ TinyPNG์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ์บ์ฑ: ์บ์ฑ ์ ๋ต์ ๊ตฌํํ์ฌ ์๋ฒ์ ๋ํ ์์ฒญ ์๋ฅผ ์ค์ ๋๋ค. HTTP ์บ์ฑ ํค๋์ ์๋น์ค ์์ปค๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ์์กด์ฑ ๊ด๋ฆฌ: ์ ๊ธฐ์ ์ผ๋ก ์์กด์ฑ์ ๊ฒํ ํ๊ณ ์ ๋ฐ์ดํธํฉ๋๋ค. ์ฌ์ฉํ์ง ์๋ ์์กด์ฑ์ ์ ๊ฑฐํ์ฌ ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ค์ ๋๋ค.
- CDN ํ์ฉ: ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN)๋ฅผ ์ฌ์ฉํ์ฌ ์ง๋ฆฌ์ ์ผ๋ก ๋ถ์ฐ๋ ์๋ฒ์์ ์ ์ ์์ฐ์ ์ ๊ณตํ์ฌ ์ ์ธ๊ณ ์ฌ์ฉ์์ ๋ก๋ ์๊ฐ์ ๊ฐ์ ํฉ๋๋ค. ์๋ก๋ Cloudflare, AWS CloudFront, Akamai๊ฐ ์์ต๋๋ค.
- ๋ณ๋ ฌ ์ฒ๋ฆฌ: ๋น๋ ์์คํ ์ด ํ์ฉํ๋ ๊ฒฝ์ฐ ๋ณ๋ ฌ ์ฒ๋ฆฌ๋ฅผ ํ์ฉํ์ฌ ๋น๋ ์๋๋ฅผ ๋์ ๋๋ค. ESBuild์ SWC๋ ๋ชจ๋ ๋ณธ์ง์ ์ผ๋ก ๋ณ๋ ฌ ์ฒ๋ฆฌ๋ฅผ ํ์ฉํฉ๋๋ค.
- ๋น๋ ๋๊ตฌ ์ ๊ธฐ์ ์ ๊ทธ๋ ์ด๋: ๋น๋ ๋๊ตฌ์ ์ต์ ๋ฒ์ ์ ์ ์งํ์ธ์. ์ต์ ๋ฒ์ ์๋ ์ข ์ข ์ฑ๋ฅ ๊ฐ์ ๋ฐ ๋ฒ๊ทธ ์์ ์ด ํฌํจ๋ฉ๋๋ค.
์๋ฅผ ๋ค์ด, ์ฌ๋ฌ ์ธ์ด๋ก ์ฝํ ์ธ ๋ฅผ ์ ๊ณตํ๋ ๊ธ๋ก๋ฒ ๋ด์ค ๊ธฐ๊ด์ ์ฝ๋ ์คํ๋ฆฌํ ์ ๊ตฌํํ์ฌ ์ฌ์ฉ์ ๊ฒฝํ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค. ์ธ์ด๋ณ ๋ฒ๋ค์ ํ์์ ๋ฐ๋ผ ๋ก๋ํ์ฌ ๋ค๋ฅธ ์ง์ญ์ ์ฌ์ฉ์๋ฅผ ์ํ ์ด๊ธฐ ๋ก๋ ์๊ฐ์ ์ค์ผ ์ ์์ต๋๋ค.
์ฌ๋ก ์ฐ๊ตฌ ๋ฐ ์ฑ๋ฅ ๋ฒค์น๋งํฌ
์๋ง์ ์ฌ๋ก ์ฐ๊ตฌ์ ๋ฒค์น๋งํฌ๊ฐ ESBuild์ SWC์ ์ฑ๋ฅ ์ด์ ์ ์ ์ฆํฉ๋๋ค.
- ESBuild ๋ Webpack: ๋ฒค์น๋งํฌ๋ ESBuild๊ฐ Webpack๋ณด๋ค 10-100๋ฐฐ ๋น ๋ฅธ ๋น๋ ์๊ฐ์ ๋ฌ์ฑํ๋ ๊ฒ์ ์ผ๊ด๋๊ฒ ๋ณด์ฌ์ค๋๋ค.
- SWC ๋ Babel: SWC๋ ํนํ ๋๊ท๋ชจ ํ๋ก์ ํธ์์ ํธ๋์คํ์ผ๋ง ์๋ ๋ฉด์์ ์ผ๋ฐ์ ์ผ๋ก Babel์ ๋ฅ๊ฐํฉ๋๋ค.
์ด๋ฌํ ๊ฐ์ ์ฌํญ์ ๊ฐ๋ฐ์์๊ฒ ์๋นํ ์๊ฐ ์ ์ฝ์, ์ฌ์ฉ์์๊ฒ๋ ๋ ๋น ๋ฅธ ๋ก๋ฉ ์๊ฐ์ ์๋ฏธํฉ๋๋ค.
๊ฒฐ๋ก : ์ต์ ์ ์ฑ๋ฅ์ ์ํ ์ต์ ๋น๋ ๋๊ตฌ ์์ฉ
ํ๋ก ํธ์๋ ๋น๋ ํ๋ก์ธ์ค๋ฅผ ์ต์ ํํ๋ ๊ฒ์ ๊ณ ์ฑ๋ฅ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๊ณตํ๋ ๋ฐ ํ์์ ์ ๋๋ค. ESBuild์ SWC๋ Webpack ๋ฐ Babel๊ณผ ๊ฐ์ ๊ธฐ์กด ๋น๋ ๋๊ตฌ์ ๋ํ ๊ฐ๋ ฅํ ๋์์ ์ ๊ณตํ๋ฉฐ, ์๋นํ ์ฑ๋ฅ ํฅ์๊ณผ ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ ๊ฐ์ํ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด๋ค์ ๊ธฐ๋ฅ์ ์ดํดํ๊ณ , ํ๋ก์ ํธ์ ํตํฉํ๋ฉฐ, ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ตฌํํจ์ผ๋ก์จ ๋น๋ ์๊ฐ์ ๊ทน์ ์ผ๋ก ์ค์ด๊ณ , ๊ฐ๋ฐ์ ์์ฐ์ฑ์ ํฅ์์ํค๋ฉฐ, ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํฌ ์ ์์ต๋๋ค. ํน์ ํ๋ก์ ํธ์ ์๊ตฌ ์ฌํญ์ ํ๊ฐํ๊ณ ์๊ตฌ ์ฌํญ์ ๊ฐ์ฅ ์ ๋ง๋ ๋๊ตฌ๋ฅผ ์ ํํ์ญ์์ค. ๋น๋ ํ์ดํ๋ผ์ธ์ ๋ํ ์ต์ ์ ๊ตฌ์ฑ์ ์ฐพ๊ธฐ ์ํด ์คํํ๊ณ ๋ฐ๋ณตํ๋ ๊ฒ์ ๋๋ ค์ํ์ง ๋ง์ญ์์ค. ๋น๋ ์ต์ ํ์ ๋ํ ํฌ์๋ ์ฅ๊ธฐ์ ์ผ๋ก ์ฑ๊ณผ๋ฅผ ๊ฑฐ๋์ด ๋ ๋น ๋ฅธ ๊ฐ๋ฐ ์ฃผ๊ธฐ, ๋ ํ๋ณตํ ๊ฐ๋ฐ์, ๊ทธ๋ฆฌ๊ณ ์ ์ธ๊ณ์ ์ผ๋ก ๋ ๋ง์กฑ์ค๋ฌ์ด ์ฌ์ฉ์๋ก ์ด์ด์ง ๊ฒ์ ๋๋ค.
ํ๋ก์ ํธ๊ฐ ๋ฐ์ ํจ์ ๋ฐ๋ผ ์ ๊ธฐ์ ์ผ๋ก ๋น๋ ์ฑ๋ฅ์ ๋ถ์ํ๊ณ ์ ๋ต์ ์กฐ์ ํ๋ ๊ฒ์ ์์ง ๋ง์ญ์์ค. ํ๋ก ํธ์๋ ํ๊ฒฝ์ ๋์์์ด ๋ณํํ๊ณ ์์ผ๋ฉฐ, ์ต์ ๋๊ตฌ์ ๊ธฐ์ ์ ๋ํ ์ ๋ณด๋ฅผ ์ ์งํ๋ ๊ฒ์ ์ต์ ์ ๋น๋ ์ฑ๋ฅ์ ์ ์งํ๋ ๋ฐ ์ค์ํฉ๋๋ค.